<template>
    <div class="table">
        <el-table :data="tableData" :empty-text="BaseConfig.emptyText" cell-class-name="pp" header-cell-class-name="pp">
            <el-table-column label="#" type="index"/>
            <el-table-column label="姓名" prop="username"/>
            <el-table-column label="体温(℃)">
                <template #default="scope">
                    <el-tag v-if="scope.row.temper > 38.0" type="danger">{{ scope.row.temper }}</el-tag>
                    <el-tag v-else>{{ scope.row.temper }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column class-name="tag" label="基础状况">
                <template #default="scope">
                    <div v-if="scope.row.fever || scope.row.headache">
                        <el-tag v-show="scope.row.fever" style="margin:0 5px  " type="danger">发烧</el-tag>
                        <el-tag v-show="scope.row.headache" style="margin:0  5px " type="danger">头痛</el-tag>
                    </div>
                    <el-tag v-else>正常</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="其他问题" prop="remark">
                <template #default="scoped">
                    <el-text truncated>{{ scoped.row.remark }}</el-text>
                </template>
            </el-table-column>
            <el-table-column label="提交时间">
                <template #default="scope">
                    {{ dealDateTime(scope.row.createTime) }}
                </template>
            </el-table-column>
        </el-table>
    </div>
    <div class="page">
        <el-pagination
                v-model:current-page="currentPage"
                v-model:page-size="pageSize"
                :total="htotal"
                hide-on-single-page
                layout="total, prev, pager, next"
                @current-change="handleCurrentChange"
        />
    </div>
</template>

<script lang='ts' setup>
import { onBeforeMount, ref } from 'vue'
import { DealHealth, HealthDto } from '@/ts/type/Health'
import HealthService from '@/api/healthApi'
import { dealDateTime } from '@/utils/commonUtils'
import { BaseConfig } from '@/config/config'
import { EventBus } from '@/utils/mitt'

const searchBool = ref<boolean>(false)
const tableData = ref<HealthDto[]>([])
const currentPage = ref<number>(1)
const pageSize = ref<number>(13)
const htotal = ref<number>(0)
const form = ref<DealHealth>({})
// 获取用户列表数据
const getHealthInfoList = () => {
  HealthService.getHealthInfoByStatus(currentPage.value, pageSize.value).then(res => {
    const { total, list } = res.data
    tableData.value = list
    htotal.value = total
  })
}

const handleCurrentChange = (val: number) => {
  currentPage.value = val
  if (!searchBool.value) getHealthInfoList()
  query()
}

// 监听up组件的数据
EventBus.on('searchHealth', res => {
  searchBool.value = res
  if (!res) getHealthInfoList()
})
EventBus.on('searchHealthForm', res => {
  form.value = res
  query()
})

// 模糊查询
const query = () => {
  HealthService.postQuery(currentPage.value, pageSize.value, form.value).then(res => {
    const { total, list } = res.data
    tableData.value = list
    htotal.value = total
  })
}

// 页面加载数据时进行数据获取
onBeforeMount(() => {
  getHealthInfoList()
})
</script>

<style lang='scss' scoped>
:deep(.pp ) {
  text-align: center;
}

.page {
  margin: 15px auto 0;
}
</style>